<style>
fieldset {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}
div.img_warper{
	float: left;
}
div.img_warper img{
	max-width: 120px;
}
#file_poster ~ div > img{
	max-width: 480px;
}
#file_icon ~ div > img{
	width: 72px;
}
</style>
<script>
$(document).ready(function(){
	var product_category_list = jQuery.parseJSON($("#product_category_list").val());
	for(x in product_category_list){
		if (product_category_list[x]['id'] == $("#category_id").val()) {
			$("#type").val(product_category_list[x]['type']);
		}
	}
	var product_category_list = jQuery.parseJSON($("#product_category_list").val());
	var category_id = $('#category_id').val();
	$('#category_id').find('option').remove();
	for(x in product_category_list){
		if (product_category_list[x]['type'] == $("#type").val()) {
			if(product_category_list[x]["id"] == category_id){
				$('#category_id').append(
			        $('<option selected = "selected"></option>').val(product_category_list[x]['id']).html(product_category_list[x]['name']));
			}else{
				$('#category_id').append(
			        $('<option></option>').val(product_category_list[x]['id']).html(product_category_list[x]['name']));
			}
		}
	}
	$("#type").change(changeCategoryOption);
	
	$("#file_icon").change(function(e) {
		$(this).next().remove();
		e.preventDefault();
		var files = e.originalEvent.target.files;
//		We need to send dropped files to Server
		handleFileUpload(files,$(this),"/images/product_data/icons",$("#icon"),"replace");
	});
	if($("#icon").val() != ""){
		$("#file_icon").after("<div><img src = '" + $("#icon").val() + "'/></div>");
	}
	$("#file_poster").change(function(e) {
		$(this).next().remove();
		e.preventDefault();
		var files = e.originalEvent.target.files;
//		We need to send dropped files to Server
		handleFileUpload(files,$(this),"/images/product_data/poster",$("#poster"),"replace");
	});
	if($("#poster").val() != ""){
		$("#file_poster").after("<div class = 'img_warper'><img src = '" + $("#poster").val() + "'/></div>");
	}
	$("#file_ingame_image").change(function(e) {
		$(this).next().remove();
		e.preventDefault();
		var files = e.originalEvent.target.files;
//		We need to send dropped files to Server
		handleFileUpload(files,$(this),"/images/product_data/poster",$("#ingame_image"),"add");
	});
	if($("#ingame_image").val() != ""){
		var intro_image = $("#ingame_image").val().split("|");
		intro_image.reverse();
		for(x in intro_image){
			$("#file_ingame_image").after("<div class = 'img_warper'><div style = 'display:inline-block;'><span class = 'close' onClick = renoveImage($(this),$('#ingame_image'))>&times;</span><img src = '" + intro_image[x] + "'/></div></div>");
		}
	}
	$("#file_download_link").change(function(e) {
		e.preventDefault();
		var files = e.originalEvent.target.files;
//		We need to send dropped files to Server
		handleFileUpload(files,$(this),"/images/product_data/files",$("#download_link"),"add");
	});

	if($("#download_link").val() != ""){
		var download_link_list = $("#download_link").val().split("|");
		for(x in download_link_list){
			addDownloadLink(download_link_list[x]);
		}
		$("#download_link").val("");
	}
	$("#add_link_download").click(function(e){
		addDownloadLink("");
	});
	$( "#add_product_form" ).submit(function( event ) {
		for(i = 0;i < number_download_link ;i++){
			if($("#link_download_text_" + i).val() != ""){
				if($("#download_link").val() != ""){
					$("#download_link").val($("#download_link").val() + "|" + $("#link_download_text_" + i).val());
	        	}else{
	        		$("#download_link").val($("#link_download_text_" + i).val());
	        	}
			}
		}
	});
	
});
var number_download_link = 0;
function addDownloadLink(value){
	$("#add_link_download").before("<input type='text' class='form-control' value='" + value + "' id = 'link_download_text_" + number_download_link + "'><br />");
	number_download_link++;
}
function renoveImage(element,content){
	var intro_image = content.val().split("|");
	var image = new Array();
	for(x in intro_image){
		if(intro_image[x] != element.parent().children("img").attr('src')){
			image.push(intro_image[x]); 
		}
	}
	element.parent().remove();
	content.val(image.join("|"));
}
function changeCategoryOption(){
	var product_category_list = jQuery.parseJSON($("#product_category_list").val());
	$('#category_id').find('option').remove();
	for(x in product_category_list){
		if (product_category_list[x]['type'] == $("#type").val()) {
			$('#category_id').append(
			        $('<option></option>').val(product_category_list[x]['id']).html(product_category_list[x]['name']));
		}
	}
}
</script>
<?php
    $formErrors = $this->getHelper('formErrors');
    $formErrors->setElementStart('<span class="help-inline">')
               ->setElementSeparator('<br />')
               ->setElementEnd('</span>'); 
echo $this->form;
echo $this->formHidden("product_category_list",json_encode($this->product_category_list));
